<template>

  <smart-page id="system-menu">
    <template #search>
      <smart-search :query-array="ORDER_SEARCH" @on-handler="onSearch"/>
    </template>
    <a-table v-model:selectedKeys="selectedKeys"
             :table-layout-fixed="theme.layoutFixed"
             :row-selection="rowSelection"
             :columns="ORDER_COLUMNS"
             :row-key="rowKey"
             :column-resizable="theme.resizable"
             :bordered="theme.bordered"
             :stripe="theme.stripe"
             :sticky-header="theme.sticky"
             :hoverable="theme.hoverAble"
             :pagination="pagination"
             :loading="theme.loading"
             :data="dataSource"
             @page-change="onPageChange"
             @page-size-change="onPageSizeChange">


      <template #gj="{ record }">
        {{ record.staff === null ? '未分配' : record.staff.name }}
      </template>

      <template #action="{ record }">
        <a-space size="mini">
          <a-link  v-if="record.video"  @click="readCtr.open(record)">查看视频</a-link>
        </a-space>
      </template>

    </a-table>
    <refine-modal v-if="readCtr.show" :record="readCtr.record" @cancel="readCtr.close"/>
  </smart-page>


</template>
<script lang="ts" setup name="system-settings-menu">
import {onMounted} from 'vue';
// import {WorkOptions} from "@/libs/options";
import RefineModal from './tran.vue'

import {TablePage} from "@/libs/core";
import {ORDER_COLUMNS} from "@/pages/modules/work/resource/colums";
import {WorkHttp} from "@/pages/modules/work/resource/http";
import {ORDER_SEARCH} from "@/pages/modules/work/resource/search";
import {Acl} from "@/libs/acl";

const pageConfig = {title: '列表', rowKey: 'id', nameKey: 'name',}
const {getOrderFoodsPageList} = WorkHttp
const tablePage = new TablePage(pageConfig).setFetchXhr(getOrderFoodsPageList).setPermission(Acl.WORK_PIG_ORDER_FOODS_FOODS_PAGE_LIST);

const {theme, pagination, rowKey, dataSource, rowSelection, selectedKeys} = tablePage
const {onFetch, onPageChange, onPageSizeChange, onSearch,readCtr} = tablePage
onMounted(() => onFetch())
</script>

<style lang="less" scoped>
:deep( .smart-page-header) {
  margin-bottom: 1px !important;
}
</style>